<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script language="javascript" type="text/javascript">
			function Tank() {
				this.x = 0;
				this.y = 0;
				this.move = function(direct) {
					switch(direct) {
						case 0:
							window.alert("向上移动");
							var mytank = document.getElementById('mytank');
							var top = mytank.style.top;
							top = parseInt(top.substr(0, top.length - 2));
							mytank.style.top = (top - 50) + "px";
							break;
						case 1:
							window.alert("向右移动");
							var mytank = document.getElementById('mytank');
							var left = mytank.style.left;
							left = parseInt(left.substr(0, left.length - 2));
							mytank.style.left = (left + 50) + "px";
							break;
						case 2:
							window.alert("向下移动");
							var mytank = document.getElementById('mytank');
							var top = mytank.style.top;
							top = parseInt(top.substr(0, top.length - 2));
							mytank.style.top = (top + 50) + "px";
							break;
						case 3:
							window.alert("向左移动");
							var mytank = document.getElementById('mytank');
							var left = mytank.style.left;
							left = parseInt(left.substr(0, left.length - 2));
							mytank.style.left = (left - 50) + "px";
							break;
					}
				}
			}

			var tank = new Tank();

			function tankmove(direct) {
				switch(direct) {
					case 0:
						tank.move(direct);
						break;
					case 1:
						tank.move(direct);
						break;
					case 2:
						tank.move(direct);
						break;
					case 3:
						tank.move(direct);
						break;
				}
			}
		</script>
		<title>tank</title>
		<style>
			.gamediv {
				width: 500px;
				height: 400px;
				background-color: pink;
				position: absolute;
			}
			
			.controlcenter {
				width: 200px;
				height: 100px;
				border: 1px solid groove
			}
		</style>
	</head>

	<body>
		<table border=1px align="center" class="controlcenter">
			<tr>
				<td colspan="3">游戏键盘</td>
			</tr>
			<tr>
				<td>**</td>
				<td><input type="button" value="↑↑" onclick="tankmove(0)" /></td>
				<td>**</td>
			</tr>
			<tr>
				<td><input type="button" value="←←" onclick="tankmove(3)" /></td>
				<td>**</td>
				<td><input type="button" value="→→" onclick="tankmove(1)" /></td>
			</tr>
			<tr>
				<td>**</td>
				<td><input type="button" value="↓↓" onclick="tankmove(2)" /></td>
				<td>**</td>
			</tr>
		</table>
		<div class="gamediv">

			<img id="mytank" style="width:40px;left:50px;top:100px;position:absolute" src="../img/坦克.jpg" />

		</div>

	</body>

</html>